<template name="swiperBox">
	<view class="swiperUnit">
		<swiper @change="swiperChange"  :interval="4000" :duration="400" class="swiper" :autoplay="true">
			<swiper-item v-for="(item , index) in swiperList" :key="index">
				<navigator class="swiper" :url="`/pages/details/${item.url}`">
					<image :src="item.img"></image>
				</navigator>
			</swiper-item>
		</swiper>
		<view class="rowDot">
			<view v-for="(item , index) in swiperList" :key="index" class="dots">
				<view :class="['dot', index === swiperCurrent ? 'active' : '']"></view>  
			</view> 
		</view>
	</view>
</template>

<script>
	export default{
		name:"swiperBox",
		props:{
				
				swiperList:{
					url:{
						type: String,
						default: ''
					},
					img:{
						type: String,
						default: ''
					}
				}
				
			},
		data(){
			return{
				current: 0,
				swiperCurrent: 0
			}
		},
		methods:{
			 swiperChange (e) {
			    this.swiperCurrent = e.detail.current
			  }

		}
	}
</script>

<style lang="scss">
.swiperUnit{
	position: relative;
	.swiper {
	  width: 100%;
	  height: 400rpx;
	  image {
		width: 100%;
		height: 100%;
		border-radius: 10rpx;
	  }
	}
	.rowDot{
		display: flex;
		position: absolute;
		bottom: 20rpx;
		left: calc((100% - 144rpx) / 2);
		.dots{
			flex-direction: row;
			justify-content: center;
			align-items: center;
			align-content: center;
			.dot {
			  margin-right:8rpx;
			  width: 40rpx;
			  height: 8rpx;
			  opacity: 1;
			  border-radius: 6rpx;
			  background: #fff5f9;
			}
			.dot.active {
			  background: #ff4e54;
			} 
		}
	}
}	
</style>
